<template>
  <div class="real-time-data-container">
    <el-row :gutter="20">
      <el-form ref="form"
               label-width="70px"
               :model="requestParams">
        <el-col :span="6">
          <el-form-item label="项目名称">
            <el-select v-model="requestParams.project_id"
                       class="width-style"
                       :disabled="proArr.length === 1 ? true :false"
                       @change="onProChange"
                       placeholder="请选择">
              <el-option v-for="item in proArr"
                         :key="item.project_id"
                         :label="item.project_name"
                         :value="item.project_id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="施工升降机"
                        label-width="90px">
            <el-select v-model="requestParams.equip_no"
                       class="width-style"
                       placeholder="请选择">
              <el-option v-for="item in elevatorArr"
                         :key="item.device_no"
                         :label="item.device_name"
                         :value="item.device_no">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="日期">
            <el-date-picker v-model="timeArr"
                            :picker-options="pickerOptions"
                            @change="onChangeTime"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6"
                class="align-button-style">
          <el-button type="primary"
                     @click="onSearch">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-col>
        <el-col :span="24">
          <el-tabs type="border-card"
                   v-model="activeName"
                   @tab-click="handleClick">
            <el-tab-pane label="工作数据"
                         name="first">
              <WorkDataComponent :isRefresh.sync="isRefresh"
                                 :requestParams.sync="requestParams"></WorkDataComponent>
            </el-tab-pane>
            <el-tab-pane label="状态数据"
                         name="second">
              <StatusDataComponent :isRefresh.sync="isRefresh"
                                   :requestParams.sync="requestParams"></StatusDataComponent>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import moment from 'moment'
import { constructionLiftApi } from "@/services/WorkCenter";
import { ProjectListApi } from "@/services/ProjectCenter";//项目列表数据
import WorkDataComponent from './Components/WorkDataComponent';//工作数据组件
import StatusDataComponent from './Components/StatusDataComponent';//状态数据组件
export default {
  components: {
    WorkDataComponent,
    StatusDataComponent
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (v) {
          let limitDate =
            v.getTime() < new Date().getTime() - 7 * 86400000 ||
            v.getTime() >= Date.now();
          // 86400000:一天的毫秒
          return limitDate;
        }
        // onPick: ({ maxDate, minDate }) => {
        //   // 把选择的第一个日期赋值给一个变量。
        //   this.choiceDate = minDate.getTime()
        //   // 如何你选择了两个日期了，就把那个变量置空
        //   if (maxDate) this.choiceDate = ''
        // },
        // disabledDate: time => {
        //   // 如何选择了一个日期
        //   if (this.choiceDate) {
        //     // 7天的时间戳
        //     const one = 7 * 24 * 3600 * 1000
        //     // 当前日期 - one = 7天之前
        //     const minTime = this.choiceDate - one
        //     // 当前日期 + one = 7天之后
        //     const maxTime = this.choiceDate + one
        //     return (
        //       time.getTime() < minTime ||
        //       time.getTime() > maxTime ||
        //       // 限制不能选择今天及以后
        //       time.getTime() > Date.now()
        //     )
        //   } else {
        //     //如果没有选择日期，就要限制不能选择今天及以后
        //     return time.getTime() > Date.now()
        //   }
        // }
      },
      isRefresh: 0,//1：刷新；0:不刷新
      timeArr: null,//日期
      elevatorArr: [],//目标项目下的设备数据集合
      activeName: 'first',
      requestParams: {
        start_date: '',//开始日期
        end_date: '',//结束日期
        project_id: '',//项目主键值
        equip_no: '',//设备编号
        is_page: 1,//1:分页；0：不分页
      },
      proArr: [],//项目名称数组
    }
  },
  methods: {
    onChangeTime (val) {//时间
      this.requestParams.start_date = this.timeArr ? val[0] : '';
      this.requestParams.end_date = this.timeArr ? val[1] : '';
    },
    onProChange (val) {
      this.requestParams.equip_no = '';//重置
      this.getElevatorData('switchPro');//设备数据集
    },
    //施工升降机具体项目下拉数据
    getElevatorData (typeV) {
      this.elevatorArr = [];//重置
      return constructionLiftApi
        .getConstructionLift({
          params: {
            projectId: this.requestParams.project_id,//项目主键值
            is_page: 0,//1:分页；0：不分页
          },
        })
        .then(
          (res) => {
            if (res.code === 0) {
              let list = res.data.list || [];
              this.elevatorArr = list;
              if (typeV) {
                this.requestParams.equip_no = list.length > 0 ? list[0].device_no : '';//默认首个
              };
            };
          },
          (err) => {
            console.log(err);
          }
        );
    },
    // 获取项目列表
    getProjectList () {
      this.proArr = [];//重置
      return ProjectListApi.getProjectManageList({
        data: {
          is_page: 0,
          conditions: [],
          module_id: "3",
        },
      }).then(
        (res) => {
          if (res.code === 0) {
            let list = res.data.list || [];
            this.proArr = list;
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    handleClick (tab, event) {//切换
      this.isRefresh = 1;//1:刷新；0:不刷新
    },
    //查询
    onSearch () {
      this.isRefresh = 1;//刷新
    },
    //重置
    onReset () {
      this.initFunc();//初始
      this.onSearch();//查询
    },
    initFunc () {
      const start = moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      const end = moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');
      this.timeArr = null;
      this.timeArr = [start, end];
      this.requestParams.start_date = start; //开始     
      this.requestParams.end_date = end;//结束
      this.requestParams.equip_no = this.$route.query.device_no;//传参-设备主键值
      this.requestParams.project_id = Number(this.$route.query.project_id);//传参-项目主键值
    }
  },
  watch: {
    '$store.state.choosedProject': {
      handler (newval) {
        this.project = newval
        this.requestParams.project_id = this.project.project_id;
        if (this.$store.state.choosedProjectList.length == 0) {
          this.proArr = [newval];//默认首个
        }
        this.isRefresh = 1;
      },
      deep: true,
      immediate: true
    },
    //飞轮项目切换时更新列表数据
    '$store.state.choosedProjectList': {
      handler (newval) {
        if (newval.list.length > 0) {
          this.proArr = newval.list;
        };
        if (newval.list.length == 0) {
          let local = window.localStorage.getItem('choosedProject') || '{}'
          this.proArr = [JSON.parse(local)] || [];
          this.requestParams.project_id = this.proArr[0].project_id || '';
        };
        this.isRefresh = 1;
      },
      deep: true
    },
  },
  async created () {
    this.initFunc();//初始函数
    let local = window.localStorage.getItem('choosedProject') || '{}';
    let chooseList = window.localStorage.getItem('choosedProjectList') || '[]';
    if (JSON.parse(chooseList).length > 0) {
      this.proArr = JSON.parse(chooseList);
    } else {
      this.proArr = [JSON.parse(local)];
    };
    // await this.getProjectList();//项目数据集合获取
    await this.getElevatorData();//施工升降机具体项目下拉数据
  }
}
</script>

<style lang="scss" scoped>
.real-time-data-container {
  padding: 20px;
  .width-style {
    width: 100% !important;
  }
  .align-button-style {
    text-align: right;
  }
}
</style>